<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A-Frame Asset Uploader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html, body {
        height: 100%;
      }

      html {
        font-size: 24px;
      }

      body {
        background: rgb(239,45,94);
        color: #fff;
        font: normal 300 1.2rem/1.5 Fira Sans, sans-serif;
      }

      a {
        text-decoration: none;
      }

      .flex {
        display: flex;
      }

      .flex--center {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .copy--center {
        text-align: center;
      }

      .main {
        height: 100vh;
        padding: 2vw 1vw;
        width: 100%;
      }

      .masthead__wordmark {
        font: 200 3rem/1.25 Fira Sans, sans-serif;
        font-size: calc(2.25rem + 2vw);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .wrap {
        margin: 0 auto;
        max-width: 800px;
      }

      .masthead__bracket {
        color: rgba(255,255,255,.25);
      }

      .masthead__slogan {
        border-top: 2px solid rgba(255,255,255,.25);
        display: inline-block;
        font-size: calc(0.5rem + 2vw);
        font-weight: 200;
        margin-top: 1rem;
        padding-top: 1rem;
      }

      a,
      .btn,
      .masthead__slogan {
        color: rgba(255,255,255,.75);
        transition: 0.2s ease-in-out;
      }

      a:hover {
        color: #fff;
      }

      img {
        display: inline-block;
      }

      .credits {
        bottom: 2vw;
        position: absolute;
        right: 3vw;
      }

      .mozilla-logo {
        opacity: 0.5;
        transition: opacity 0.2s ease-in-out;
        width: calc(3rem + 6vw);
      }

      a:hover .mozilla-logo {
        opacity: 1;
      }

      .btn {
        border: 0;
        cursor: pointer;
        display: inline-block;
        font-family: inherit;
        font-size: inherit;
      }

      .btn[disabled],
      .btn[disabled]:hover {
        background-color: #AAA;
        cursor: default;
      }

      .btn--upload {
        background-color: #1ad;
        border-radius: 0.15rem;
        color: rgba(255,255,255,0.8);
        font-size: 0.8rem;
        margin: 1rem 0;
        padding: 0.5rem 1rem;
      }

      .btn--upload:hover {
        background-color: #069;
        color: #fff;
      }

      .files {
        background: rgba(255,255,255,0.1);
        box-shadow: 0 10px 20px inset red;
        list-style: none;
        font-size: 0.75rem;
        margin-top: 1rem;
        padding: 1rem;
      }

      .files:empty {
        display: none;
      }

      .files li + li {
        margin-top: 0.75rem;
      }

      .files a {
        border-bottom: 1px dashed rgba(255,255,255,.4);
      }

      .files a:hover {
        border-bottom-color: rgba(255,255,255,.8);
      }

      .uploadcare-widget {
        display: none;
      }

      @media (max-width: 600px) {
        .credits {
          margin: 5vw auto;
          position: static;
        }
      }
    </style>
  </head>
  <body>
    <main class="main flex copy--center">
      <div class="wrap">
        <div class="credits">
          <a href="https://www.mozilla.org/">
            <img src="../assets/img/logo-mozilla-white.svg" class="mozilla-logo" title="Mozilla" alt="Mozilla">
          </a>
        </div>
        <h1 class="masthead__wordmark"><span class="masthead__bracket">&lt;</span>A-Frame<span class="masthead__bracket">&gt;</span></h1>
        <p class="masthead__slogan">Asset Uploader</p>
        <p><button id="uploadButton" class="btn btn--upload" disabled="true">Upload</button></p>
        <p>Sorry, the Asset Uploader is currently not working. Please try another file hosting service for now.</p>
        <ul id="filesList" class="files"></ul>
      </div>
    </main>
    <script>
      UPLOADCARE_LOCALE = 'en';
      UPLOADCARE_TABS = 'file url facebook gdrive dropbox instagram evernote flickr skydrive';
      UPLOADCARE_PUBLIC_KEY = 'd8498171c34e5cff6628';
    </script>
    <script src="//ucarecdn.com/widget/2.5.5/uploadcare/uploadcare.full.min.js"></script>
    <input type="hidden" role="uploadcare-uploader" data-multiple="true">
    <script>
      (function () {
        var urls = JSON.parse(localStorage.uploadedFiles || '[]');
        urls.forEach(prependUrlToList);

        function createLinkItem (url) {
          var li = document.createElement('li');
          var a = document.createElement('a');
          a.textContent = url;
          a.setAttribute('href', url);
          a.setAttribute('target', '_blank');
          li.appendChild(a);
          return li;
        }

        function prependUrlToList (url) {
          var li = createLinkItem(url);
          prependChild(filesList, li);
          return li;
        }

        function prependChild (parent, el) {
          parent.insertBefore(el, parent.firstChild);
        }

        window.addEventListener('beforeunload', persistUrls);
        uploadButton.addEventListener('click', openDialog);

        function persistUrls () {
          localStorage.uploadedFiles = JSON.stringify(urls);
        }

        function clearUrls () {
          urls = [];
          window.location.reload();
        }

        window.persistUrls = persistUrls;
        window.clearUrls = clearUrls;

        function openDialog () {
          uploadcare.openDialog(null, {
            multiple: true
          }).done(function (file) {
            file.promise().done(function (fileInfo) {
              uploadcare.loadFileGroup(fileInfo.uuid).done(function (fileGroup) {
                // Group creation completed successfully.
                fileGroup.files().forEach(function (file) {
                  file.promise().done(function (fileInfo) {
                    console.log(fileInfo.cdnUrl);
                    prependUrlToList(fileInfo.cdnUrl);
                    urls.push(fileInfo.cdnUrl);
                  });
                });
              }).fail(function (err) {
                console.error(err);
              });
            });
          });
        }
      })();
    </script>
  </body>
</html>
